<!--
 * @Author: lihaogn
 * @Date: 2021-12-13 14:08:35
 * @LastEditTime: 2021-12-23 09:42:59
 * @LastEditor: lihaogn
 * @Description: 表格页面容器
 * @FilePath: \lix-admin-vue2\src\components\template\lix-table-view\index.vue
-->
<template>
  <div class="gl-view-rootbox" ref="tableViewRef">
    <!-- 表格上方工具栏 -->
    <div v-if="showTool" class="gl-tool-row" ref="toolRowRef">
      <div class="tool-left">
        <slot name="tool-left"></slot>
      </div>
      <div class="tool-right">
        <slot name="tool-right"></slot>
      </div>
    </div>
    <!-- 表格 -->
    <slot name="table" :maxHeight="tableMaxHeight"></slot>
    <!-- 分页 -->
    <div v-if="showPagination" class="pagination-container" ref="paginationRef">
      <slot name="pagination"></slot>
    </div>

    <slot></slot>
  </div>
</template>

<script>
import { commonMixin } from '../../../mixins/common'
export default {
  mixins: [commonMixin],
  props: {
    // 是否显示工具栏
    showTool: {
      type: Boolean,
      default: false
    },
    // 是否显示分页
    showPagination: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableMaxHeight: undefined
    }
  },
  mounted() {
    // 计算出table的最大高度
    this.handleResize()
  },
  methods: {
    /**
     * @author: lihaogn
     * @Date: 2021-12-12 17:18:01
     * @description: resize 事件
     * @param {*}
     * @return {*}
     */
    handleResize() {
      // 计算表格的最大高度
      this.tableMaxHeight =
        this.$refs.tableViewRef.clientHeight -
        (this.showTool ? this.$refs.toolRowRef.clientHeight + 16 : 0) -
        (this.showPagination ? this.$refs.paginationRef.clientHeight + 16 : 0) -
        40
    }
  }
}
</script>

<style lang="less" scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
